<template>
  <div>
    <h3>发布寻亲</h3>
  <el-form :model="personSought" ref="personSought" label-width="100px" class="demo-personSought">
    <el-form-item label="被找人信息"></el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="personSought.name"></el-input>
    </el-form-item>
    <el-form-item label="选择地区">
      <el-select v-model="nowProvince" placeholder="请选择省份" @change="selectedProvince">
        <el-option
          v-for="(item,index) in selectProvinceForm"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="personSought.value1" placeholder="请选择地区" change="selectedCity">
        <el-option
          v-for="(item,index) in  provinceList"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="籍贯" prop="region">
      <el-select v-model="personSought.region" placeholder="请选择活动区域">

      </el-select>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio v-model="personSought.radio" label="1">男</el-radio>
      <el-radio v-model="personSought.radio" label="2">女</el-radio>
    </el-form-item>
    <el-form-item label="失踪时年龄">
      <el-input v-model="personSought.lostAge" placeholder="请输入年龄"></el-input>
    </el-form-item>
    <el-form-item label="生日">
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期" v-model="personSought.birth" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="失踪日期">
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期" v-model="personSought.lostTime" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="失踪地点">
      <el-input placeholder="请输入详细失踪地点" v-model="personSought.lostPlace"></el-input>
    </el-form-item>
    <el-form-item label="失踪时身高">
      <el-input placeholder="请输入身高" v-model="personSought.height"></el-input>
    </el-form-item>
    <el-form-item label="失踪经过">
      <el-input type="textarea" autosize placeholder="请输入详细失踪经过" v-model="personSought.missingCourse"></el-input>
    </el-form-item>
    <el-form-item label="特征描述">
      <el-input type="textarea" autosize placeholder="请输入详细外貌特征描述" v-model="personSought.appearance"></el-input>
    </el-form-item> 
    <el-form-item label="联系人姓名">
      <el-input type="textarea" autosize v-model="personSought.contactName"></el-input>
    </el-form-item>
    <el-form-item label="联系人电话">
      <el-input type="textarea" autosize v-model="personSought.telephone"></el-input>
    </el-form-item>
    <el-form-item label="失踪人照片">
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!personSought.disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!personSought.disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="personSought.dialogVisible">
        <img width="100%" :src="personSought.dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
  </el-form>
  <el-row>
    <el-button type="success" round @click="getSeekFamily">发布信息</el-button>
  </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "SeekFamily",

  data() {
    return {      
      active:0,
      personSought:{
        // 失踪人姓名
        name:'',
        // 性别
        sex: 0,
        // 籍贯
        nativePlace:[],
        value1:[],
        // 外貌特征
        appearance: "",
        // 生日
        birth: "",
        // 身高
        height: 0,
        // 是否报案
        isReport: 0,
        // 失踪年龄
        lostAge: 0,
        // 失踪地点
        lostPlace: "",
        // 失踪时间
        lostTime: "",
        // 失踪经过
        missingCourse: "",
        // 失踪人照片
        picture: "",
        // 联系人姓名
        contactName: "",
        // 联系人电话
        telephone: "",
        // 类型
        type: 0,
        // 和后台对接图片
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      },
      // 省份
      selectProvinceForm:[],
      // 城市
      selectCityForm:[],
      nowProvince:'',
      nowCity:''
    };
  },

  mounted() {
    // 发请求,得到省份的数据
    this.$store.dispatch("provinceList").then((res)=>{
      const arr = this.$store.state.seekfamily.provinceList;
      arr.forEach(val=> {this.selectProvinceForm.push({
          value: val.id,
          label: val.name,
        })
      });
    })
    // 发请求，得到二级联动城市的数据
   
   
  },

  computed: {
    ...mapState({
      provinceList: (state) => state.seekfamily.provinceList
    })
  },
  methods: {
    // 发布信息
    async getSeekFamily() {
      const { personSought } = this;
      await this.$store.dispatch("seekFamily", personSought);
      alert("发布成功啦！");
      this.$router.push("/home");
    },
    // 获取省份数据
    // async selectedProvince() {
    //   console.log(123);
    //    console.log(nowProvince);
    //    this.$store.dispatch("selectedProvince", nowProvince).then(()=>{
    //    const arr = this.$store.state.seekfamily.city && this.$store.state.seekfamily.city;
    //    console.log(arr);
    //    arr.forEach(val => {this.selectCityForm.push({
    //         value: val.id,
    //         label: val.name,
    //       })
    //    })
    //    console.log(this.selectCityForm);
    // })
    // },
    // 省份选择后联动获取省份下的城市数据，@change绑定的
    async selectedProvince() {
      this.$store.dispatch("selectedProvince",this.nowProvince).then(()=>{
        const arr = this.$store.state.seekfamily.cityList;
        console.log(arr);
      })
    },

    // 删除图片
    handleRemove(file) {
      console.log(file);
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.personSought.dialogImageUrl = file.url;
      this.personSought.dialogVisible = true;
    },
    // 下载图片
    handleDownload(file) {
      console.log(file);
    },

  },
};
</script>

<style lang="less" scoped>
.seekfamily {
  width: 200px;
  padding: 20px;
}
.date {
  display: inline-block;
  padding: 20px;
}
.appearance {
  width: 300px;
  padding: 20px;
}
</style>